import React, { useState, useEffect } from 'react'
// 组件
import Hooks1 from './1.useState'
import Hooks2 from './2.useRef'
import Hooks3 from './3.useEffect/index'
import Hooks4 from './4.useCallback'
import Hooks5 from './5.CustomizeHooks/CustomizeHooks'
import Hooks6 from './5.CustomizeHooks/NoCustomize'
import Hooks7 from './6.props-rfc通信'
import { Menu } from 'antd'
import { Route, Switch } from 'react-router-dom'
// import { SettingOutlined } from '@ant-design/icons'

const { SubMenu } = Menu;

function Index(props) {
  const [current, setCurrent] = useState('')
  useEffect(() => {
    setCurrent(props.location.pathname)
    return () => {
      // cleanup
    }
  }, [props])//依赖是props
  return (
    <div>
      {/* 菜单栏 */}
      <Menu
        onClick={(item) => {
          setCurrent(item.key)
          props.history.push(item.key)
        }}
        selectedKeys={[current]}
        mode="horizontal">
        <Menu.Item key="/hooks/useState">
          useState
        </Menu.Item>

        <Menu.Item key="/hooks/useRef">
          useRef
        </Menu.Item>
        <SubMenu
          title={
            <span className="submenu-title-wrapper">
              useEffect
            </span>
          }
        >
          <Menu.ItemGroup title="">
            <Menu.Item key="/hooks/useEffect/TwoParams/1234">第二个参数-依赖</Menu.Item>
            <Menu.Item key="/hooks/useEffect/Unmount">销毁阶段-执行return回调</Menu.Item>
            <Menu.Item key="/hooks/useEffect/RC">useReducer和useContext整合逻辑实现状态管理</Menu.Item>
          </Menu.ItemGroup>
        </SubMenu>
        <Menu.Item key="/hooks/useCallback">
          useCallback
        </Menu.Item>
        <SubMenu
          title="自定义hooks"
        >
          <Menu.ItemGroup title="">
            <Menu.Item key="/hooks/NoCustomize/2084208499000006819">未封装hooks</Menu.Item>
            <Menu.Item key="/hooks/CustomizeHooks/2084208499000006819">封装自定义hooks</Menu.Item>
          </Menu.ItemGroup>
        </SubMenu>
        <Menu.Item key="/hooks/props-rfc">
          rfc中props通信
        </Menu.Item>
      </Menu>

      {/* 路由 */}
      <Switch>
        <Route path="/hooks/useState" component={Hooks1} />
        <Route path="/hooks/useRef" component={Hooks2} />
        <Route path="/hooks/useEffect" component={Hooks3} />
        <Route path="/hooks/useCallback" component={Hooks4} />
        <Route path="/hooks/NoCustomize/:id" component={Hooks6} />
        <Route path="/hooks/CustomizeHooks/:id" component={Hooks5} />
        <Route path="/hooks/props-rfc" component={Hooks7} />
      </Switch>
    </div>
  )
}
export default Index
